<template>
	<div class="wrapper">
		<van-image class="img" src="http://www.dell-lee.com/imgs/vue3/user.png" />
		<div class="input">
			<input type="text" placeholder="请输入用户名" v-model="data.username" />
		</div>
		<div class="input">
			<input type="password" placeholder="请输入密码" v-model="data.password" />
		</div>
		<div class="login-btn" @click="loginSubmit">登录</div>
		<div class="login-link" @click="toRegister">立即注册</div>
	</div>
</template>

<script>
import _axios from '@/api/axios.js';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Toast } from 'vant';
export default {
	name: 'Login',
	setup () {
		const router = useRouter(); // 获取路由实例

		const data = reactive({
			username: 'admin',
			password: 123456
		})

		const loginSubmit = () => {
			_axios.post('api/login', data).then(res => {
				console.log(res);
				if (res.data.success) {
					localStorage.isLogin = true;
					router.push({ name: 'Home' });
				} else {
					console.log(res.data.msg);
					Toast.fail(res.data.msg);
				}
			}).catch(err => {
				console.log(err);
			});
		};
		const toRegister = () => {
			router.push({ name: 'Register' });
		};
		return {
			loginSubmit,
			toRegister,
			data
		};
	},
};
</script>

<style lang="scss" scoped>
.wrapper {
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	transform: translate(0, -50%);
	.img {
		width: 0.66rem;
		height: 0.66rem;
		display: block;
		margin: 0 auto 0.4rem;
	}
	.input {
		height: 0.48rem;
		line-height: 0.48rem;
		background: #f9f9f9;
		border: 0.01rem solid rgba(0, 0, 0, 0.1);
		border-radius: 6px;
		margin: 0 0.4rem 0.16rem;
		input {
			width: 100%;
			height: 0.46rem;
			padding: 0 0.16rem;
			border: none;
			outline: none;
			background: none;
			box-sizing: border-box;
			color: #777;
			font-size: 0.16rem;
			&::placeholder {
				color: #999;
				font-size: 0.16rem;
			}
		}
	}
	.login-btn {
		background-color: #0091ff;
		box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
		border-radius: 4px;
		color: #fff;
		margin: 0.32rem 0.4rem 0.16rem;
		text-align: center;
		height: 0.48rem;
		line-height: 0.48rem;
		font-size: 0.16rem;
	}
	.login-link {
		font-size: 0.14rem;
		color: #777;
		text-align: center;
	}
}
</style>
